<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <div class="img-cont">
                <el-image :src="ImgLogo" fit="fill" :lazy="true"></el-image>
            </div>
            <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="收支类型" prop="inOrexpen">
                    <el-radio-group v-model="form.inOrexpen">
                        <el-radio label="收入" />
                        <el-radio label="支出" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="财务类别">
                    <el-select v-model="form.category" placeholder="请选择财务类别" clearable filterable @change="">
                        <el-option v-for="item in options" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应收金额" prop="money">
                    <el-input v-model="form.money" placeholder="请输入金额" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        {{ props.num == 1 ? '添加财务项' : '编辑财务项' }}
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import ImgLogo from '../../../assets/img/logo.jpg'
import { FinPost, FinUpdate } from '../../../api/financial'
import { FinancialType } from '../../../types/financial';
import { cloneDeep } from 'lodash'
const emit = defineEmits<{
    (agr: 'update:modelValue', bool: boolean): void
    (agr: 'FinAdd', bool: FinancialType): void
}>()


interface PropsType {
    num: number
    Info: FinancialType | undefined
}
const props = defineProps<PropsType>()

// 表单数据
let form = reactive<FinancialType>({
    name: '',
    inOrexpen: '',
    category: '',
    money: '',
})
if (props.Info) {
    form = props.Info
}

const rules = reactive<FormRules<{ name: string, money: string, inOrexpen: string }>>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    money: [
        { required: true, message: '请输入金额', trigger: 'blur' },
    ],
    inOrexpen: [
        { required: true, message: '请输入选择收支类型', trigger: 'blur' },
    ],

})
const options = [
    "报考费",
    "学员杂费",
    "训练费用",
    "考试费用",
    "车辆费用",
    "奖金提成",
    "日常收支",
]
const ruleFormRef = ref<FormInstance>()

// 提交数据
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.num == 1) {
                FinPost(form).then((res) => {
                    ElMessage.success('添加成功')
                    emit('FinAdd', { ...form, ...res.data })
                    emit('update:modelValue', false)
                })
            } else {
                let id = props.Info!.objectId!
                let obj = cloneDeep(form)
                delete obj.createdAt
                delete obj.updatedAt
                FinUpdate(id, obj).then(() => {
                    ElMessage.success('编辑成功')
                    emit('update:modelValue', false)
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style  lang="scss">
.img-cont {
    margin-bottom: 20px;

    .el-image {
        display: flex;
        justify-content: center;

        img {
            width: 100px;
            height: 100px;
        }
    }
}

.tip-cont {
    border-left: 5px solid #1E9FFF;
    margin-bottom: 10px;
    padding: 15px;
    line-height: 22px;
    border-radius: 0 2px 2px 0;
    background-color: #f2f2f2;

    i {
        color: #fd6a3c;
        padding: 0 4px;
    }
}
</style>